* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container, main{
/* För att styra hur många element som får plats på varje rad så kan vi använda flexbox med wrap.
   När det inte får plats mer på en rad så fortsätter innehållet på nästa rad.
  Så både container och main ska vara flexbox och tillåta wrap.*/
  display: flex;
  flex-wrap: wrap;
}

main{width: 100%;}

.box {
/* Det är många olika sorters element som ska ha samma inställningar. Alla får klassen box 
   Bredden är 100% och höjden 300px. 
   Det ska vara flexbox med centrerat innehåll.
   En vit kantlinje. */
   width: 100%;
   height: 300px;
   display: flex;
   border: solid white 1px;
   align-items:center;
   justify-content: center;
}

.logo, footer{
  background-color: #3388FF;
}

nav.box{  /* OBS inget mellanslag betyder att selektorn hittar element som har BÅDE nav och klassen .box*/
    background-color: #FF8833;
    display: flex;
    flex-wrap: wrap;
    height: 100px;  
}

nav a{
  width: 50%;
  text-align: center;
  text-decoration: none;
  color: black;
}

.ads, .ads-side{background-color: #FFDD00;}

.ads-side{
  display: none;   /* I mobil-läge så syns inte reklamen på sidan. */
  width: 25%;
  height: 600px;

 /*Se till att texten centreras. */
}

.news-1{background-color: #88DD88;}
.news-2{background-color: #66EE99;}
.news-3{  background-color: #99EE66;}
.news-4{  background-color: #77FF77;}


@media only screen and (min-width:768px)
{

.container,main
{
    display: flex;
    flex-wrap: wrap;
}
.box a
{
   width: 25%;
}
nav.box
{
    width: 100%;
    align-items: center;
    flex-wrap:wrap;
}
.ads
{
    display: flex;
    align-items: center;
    justify-content:center; 
}
.ads-side
{
  
    display: none;
}
.news-1
{
    order: 1;
width: 50%;
}
.news-2
{
    width: 50%;
    order: 2;
}
.news-3,.news-4
{
    order: 4;
    width: 50%;
}
.ads
{
    order: 3;
    width: 100%;
}

}

@media only screen and (min-width:1280px)
{
.container,main
{
    display: flex;
    flex-wrap: wrap;
}
.box a
{
   width: 25%;
}
nav.box
{
    width: 100%;
    align-items: center;
    flex-wrap:wrap;
}
.ads
{
    display: flex;
    align-items: center;
    justify-content:center; 
}
.ads-side
{
  
    display: none;
}
.news-1
{
    order: 2;
    width: 50%;
}
.news-2
{
    width: 50%;
    order: 2;
}
.news-3
{
    order: 3;
    width: 50%;
}
.news-4
{
    order: 4;
    width: 50%;
}
.ads
{
 display: none;
}
.ads-side
{   
display: flex;
order:5;
width: 25%;
align-items: center;
justify-content: center;
}
footer
{
order: 6;
}
main{
    width: 75%;
}
}